// ============ 全局变量 ============
const url = "/api/rest/user";
// 获取新增表单DOM
let addForm = document.getElementById('add-form');
let gridInstance = null; // 表格实例
let userData = null; // 表格数据源
let editForm = document.getElementById('edit-form'); // 编辑表单DOM（提前声明避免报错）
const searchForm = document.getElementById('search-form'); // 搜索表单DOM

// ============ 表格配置项 ============
const gridOptions = {
  columns: [
    { name: '#', id: 'id', width: '8%' },
    { name: '用户名', id: 'username', sort: true },
    { name: '姓名', id: 'name', sort: true },
    { name: '邮箱', id: 'email', sort: true },
    { name: '电话', id: 'phone', sort: true },
    { name: '创建时间', id: 'createAt', sort: true },
    { name: '状态', id: 'enableState', sort: true },
    { name: '部门', id: 'dept.name', sort: true },
    {
      name: '操作',
      id: 'actions',
      width: '20%',
      formatter: (_, row) => gridjs.html(`
        <button type="button" data-bs-toggle="modal" data-bs-target="#editModal" class="btn btn-sm btn-outline-primary m-1"><i class="fas fa-edit" ></i> 编辑</button>
        <button type="button" onclick="toggle('${row.cells[0].data}')" class="btn btn-sm btn-outline-${row.cells[6].data === '启用' ? 'warning' : 'success'} m-1"><i class="fas fa fa-exchange" ></i> ${row.cells[6].data === '启用' ? '停用' : '启用'}</button>
      `)
    }
  ],
  server: {
    url: url, // 初始请求URL（搜索时动态修改）
    then: data => {
      userData = data.content; // 存储数据源
      // 格式化表格数据
      return data.content.map(
        user => [
          user.id,
          user.username,
          user.name,
          user.email,
          user.phone,
          user.createAt,
          user.enableState,
          user.dept.name
        ]
      );
    },
    total: data => data.totalElements // 总条数（用于分页）
  },
  pagination: {
    limit: 5, // 每页5条数据
    server: {
      url: (prev, page, limit) => addQueryParam(prev, `size=${limit}&page=${page}`) // 分页参数拼接
    }
  },
  search: false, // 关闭gridjs自带搜索，使用自定义搜索栏
  sort: true,   // 启用列排序
  language: {
    pagination: {
      previous: '上一页',
      next: '下一页',
      showing: '显示第',
      of: '条，共',
      to: '至',
      results: '条记录'
    }
  }
};

// ============ 登录状态校验 ============
if (localStorage.getItem('user') !== 'true') {
  alert('请先登录系统！');
  window.location.href = 'login.html';
  throw new Error('未登录，已跳转'); // 阻止后续代码执行
}

// ============ 工具函数：URL参数拼接 ============
function addQueryParam(url, param) {
  const separator = url.indexOf('?') !== -1 ? '&' : '?';
  return url + separator + param;
}

// ============ 表格初始化函数 ============
function initGrid() {
  if (gridInstance) {
    gridInstance.destroy(); // 销毁旧实例（避免重复渲染）
  }
  // 创建新表格实例并渲染
  gridInstance = new gridjs.Grid(gridOptions).render(document.getElementById("gridjs-container"));
}

// ============ 搜索表单提交事件 ============
searchForm.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止表单默认提交
  const formData = new FormData(searchForm); // 获取表单数据
  const searchParams = new URLSearchParams(formData); // 转换为URL查询参数
  const params = searchParams.toString(); // 转为字符串
  // 拼接搜索参数到URL（恢复初始URL避免参数叠加）
  gridOptions.server.url = addQueryParam(url, params);
  gridInstance.updateConfig(gridOptions).forceRender(); // 刷新表格
});

// ============ 页面加载完成后初始化 ============
document.addEventListener('DOMContentLoaded', function () {
  initGrid(); // 初始化表格
  initDept(); // 初始化部门下拉框
  initRole(); // 初始化角色下拉框

  // 编辑按钮点击事件：填充编辑表单
  gridInstance.on('cellClick', (...args) => {
    const event = args[0];
    const userId = args[3].cells[0].data; // 获取用户ID
    const user = userData.find(i => i.id === userId); // 查找对应用户数据

    if (event.target && user) { // 避免空值报错
      editForm.elements['id'].value = userId;
      editForm.querySelector('[name="username"]').value = user.username;
      editForm.querySelector('[name="name"]').value = user.name;
      editForm.querySelector('[name="phone"]').value = user.phone;
      editForm.querySelector('[name="email"]').value = user.email;
      editForm.querySelector('[name="deptId"]').value = user.dept?.id || ''; // 可选链容错
      editForm.querySelector('[name="roleId"]').value = user.role?.id || ''; // 可选链容错
    }
  });
});

// ============ 初始化部门下拉框（新增/编辑表单） ============
function initDept() {
  fetch('/api/rest/dept/all')
    .then((response) => response.json())
    .then((data) => {
      const addSelect = addForm.querySelector('[name="deptId"]');
      const editSelect = editForm.querySelector('[name="deptId"]');
      data.forEach(item => {
        const option = document.createElement('option');
        option.value = item.id;
        option.innerText = item.name;
        // 为两个表单创建独立选项（避免联动）
        addSelect.appendChild(option.cloneNode(true));
        editSelect.appendChild(option.cloneNode(true));
      });
    })
    .catch(error => console.error('部门初始化失败:', error));
}

// ============ 初始化角色下拉框（新增/编辑表单） ============
function initRole() {
  fetch('/api/rest/role/all')
    .then((response) => response.json())
    .then((data) => {
      const addSelect = addForm.querySelector('[name="roleId"]');
      const editSelect = editForm.querySelector('[name="roleId"]');
      data.forEach(item => {
        const option = document.createElement('option');
        option.value = item.id;
        option.innerText = item.name;
        // 为两个表单创建独立选项（避免联动）
        addSelect.appendChild(option.cloneNode(true));
        editSelect.appendChild(option.cloneNode(true));
      });
    })
    .catch(error => console.error('角色初始化失败:', error));
}

// ============ 工具函数：表单数据转JSON ============
function formJsonData(form) {
  const jsonData = {};
  const formData = new FormData(form);
  formData.forEach((value, key) => {
    if (!jsonData[key]) {
      // 处理多值参数（如复选框）
      jsonData[key] = formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key);
    }
  });
  return jsonData;
}

// ============ 头像上传处理 ============
const fileInput = document.getElementById('e_fileInput');
if (fileInput) { // 容错：避免元素不存在报错
  fileInput.addEventListener('change', function () {
    const file = fileInput.files[0];
    if (!file) return; // 无文件则返回
    const formData = new FormData();
    formData.append('file', file);
    formData.append('type', '头像');
    fetch('/api/rest/attachment', {
      method: 'POST',
      body: formData
    })
      .then(response => response.json())
      .then(data => {
        // 存储附件ID到编辑表单
        editForm.querySelector('[name="avatar"]').value = data.id;
      })
      .catch(error => console.error('头像上传失败:', error));
  });
}

// ============ 新增用户表单提交 ============
addForm.addEventListener('submit', (event) => {
  event.preventDefault();
  if (addForm.checkValidity()) { // 校验表单合法性
    const jsonData = formJsonData(addForm);
    fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(jsonData)
    }).then(response => {
      if (response.ok) {
        // 关闭模态框
        bootstrap.Modal.getInstance(document.getElementById('addModal')).hide();
        initGrid(); // 刷新表格
        // 成功提示
        Toastify({
          text: "成功添加新用户",
          duration: 3000,
          close: true,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          style: { borderRadius: "10px" }
        }).showToast();
        addForm.reset(); // 重置表单
        addForm.classList.remove('was-validated'); // 清除验证样式
      } else {
        response.json().then(data => alert(data.message || '添加失败'));
      }
    });
  } else {
    addForm.classList.add('was-validated'); // 显示验证错误
  }
});

// ============ 编辑用户表单提交 ============
editForm.addEventListener('submit', (event) => {
  event.preventDefault();
  if (editForm.checkValidity()) { // 校验表单合法性
    const jsonData = formJsonData(editForm);
    fetch(`${url}/${jsonData.id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(jsonData)
    }).then(response => {
      if (response.ok) {
        // 关闭模态框
        bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
        initGrid(); // 刷新表格
        // 成功提示
        Toastify({
          text: "编辑用户成功",
          duration: 3000,
          close: true,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          style: { borderRadius: "10px" }
        }).showToast();
        editForm.classList.remove('was-validated'); // 清除验证样式
      } else {
        response.json().then(data => alert(data.message || '编辑失败'));
      }
    });
  } else {
    editForm.classList.add('was-validated'); // 显示验证错误
  }
});

// ============ 启用/停用状态切换 ============
function toggle(id) {
  fetch(`${url}/${id}/toggle`, { method: 'PATCH' })
    .then(response => {
      if (response.ok) {
        gridInstance.forceRender(); // 刷新表格
        // 成功提示
        Toastify({
          text: "状态切换成功",
          duration: 2000,
          close: true,
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          style: { borderRadius: "10px" }
        }).showToast();
      }
    })
    .catch(error => {
      console.error('状态切换失败:', error);
      alert('状态切换失败');
    });
}

// ============ 登出功能 ============
function logout() {
  fetch('/api/rest/user/logout', { method: 'GET' })
    .then(response => {
      if (response.ok) {
        localStorage.removeItem('user'); // 清除登录状态
        window.location.href = 'login.html'; // 跳转到登录页
      } else {
        console.error('登出失败');
        alert('登出失败，请重试');
      }
    })
    .catch(error => {
      console.error('登出网络错误:', error);
      alert('网络错误，登出失败');
    });
}